<template>
  <Layout desc="使用customRef实现输入框防抖">
    <div class="w-80 flex flex-col gap-5 items-center mt-60">
      <el-input v-model="value" placeholder="请输入" />

      <div>keywords: {{ keywords }}</div>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { debounceRef } from '@/utils/debounceRef'
const value = ref('')
const keywords = debounceRef('')

watch(value, value => (keywords.value = value))
watch(keywords, val => {
  console.log('fetch data: ', val)
})
</script>

<style scoped lang="scss"></style>
